<template>
  <div id="app">
    <el-backtop target="#app" :bottom="bottom">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
    <IconMenu/>
    <el-container>
      <el-header>
        <Header
          :activeIndex="activeIndex"
          :category="this.$store.state.categoryArticle"
          :searches="this.$store.state.articleSearch"
        />
      </el-header>
      <el-container id="body" class="loading">
        <el-main>
          <router-view/>
        </el-main>
        <el-aside>
          <Aside
            :activeIndex="activeIndex"
            :config="this.$store.state.config"
            :category="this.$store.state.categoryArticle"
            :screenWidth="screenWidth"
          />
        </el-aside>
      </el-container>
      <el-footer>
        <Footer/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import Header from './components/Header'
  import IconMenu from './components/IconMenu'
  import Aside from './components/Aside'
  import Footer from './components/Footer'

  export default {
    name: 'App',
    components: {
      Header,
      IconMenu,
      Aside,
      Footer
    },
    watch: {
      // 监听屏幕宽度变化
      screenWidth: function (val) {
        this.screenWidth = val
      }
    },
    data() {
      return {
        activeIndex: '',
        bottom: 20,
        config: {},
        category: [],
        searches: [],
        screenWidth: document.documentElement.clientWidth,
        isLoad: false,  //是否加载更多
        isFinish: false,//是否加载完成
      }
    },
    methods: {
      handleRoute() {
        // 激活菜单
        this.activeIndex = this.$store.state.activeIndex
        // 路由切换页面回到顶端
        this.$router.afterEach(() => {
          this.$el.scrollTop = 0
        })
        // 访问路径
        this.onVisit()
      },
      handleScreen() {
        this.screenWidth = document.documentElement.clientWidth;
      },
    },
    created() {
      this.$store.dispatch('getConfig')
      this.$store.dispatch('categoryArticle')
      this.$store.dispatch('articleSearch')
    },
    mounted() {
      window.addEventListener('resize', this.handleScreen)
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
</style>
